<template>
	<div class="internalFault">
		<div class="tableBox">
			<div class="title">
				<span style="color:red;">*</span>
				每天必填项目
			</div>
			<el-form class="machineForm" ref="form" label-position="left" :model="form" label-width="40%">
				<el-form-item label="内装机安全门是否有效">
					<div class="classInfo right" style="width: 50%;">
						<div class="classInfoItem left" style="margin-left:30px;" v-for="item in classList" @click="changeItem(item.id,1)">
							<div class="left" style="margin-right:15px;">{{ item.name }}</div>
							<div class="left"><img :src="selectedIndex1 == item.id ? selectImg : item.url" /></div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="安全门1是否开启">
					<div class="classInfo right" style="width: 50%;">
						<div class="classInfoItem left" style="margin-left:30px;" v-for="item in classList" @click="changeItem(item.id,2)">
							<div class="left" style="margin-right:15px;">{{ item.name }}</div>
							<div class="left"><img :src="selectedIndex2 == item.id ? selectImg : item.url" /></div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="安全门2是否开启">
					<div class="classInfo right" style="width: 50%;">
						<div class="classInfoItem left" style="margin-left:30px;" v-for="item in classList" @click="changeItem(item.id,3)">
							<div class="left" style="margin-right:15px;">{{ item.name }}</div>
							<div class="left"><img :src="selectedIndex3 == item.id ? selectImg : item.url" /></div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="安全门3是否开启">
					<div class="classInfo right" style="width: 50%;">
						<div class="classInfoItem left" style="margin-left:30px;" v-for="item in classList" @click="changeItem(item.id,4)">
							<div class="left" style="margin-right:15px;">{{ item.name }}</div>
							<div class="left"><img :src="selectedIndex4 == item.id ? selectImg : item.url" /></div>
						</div>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="tableBox" style="margin-top:30px;">
			<div class="title">内装机消耗</div>
			<el-table :data="tableData" max-height="660px">
				<el-table-column type="index" width="80">
					<template slot-scope="scope">
						<div @click="createRow" v-if="scope.$index == tableData.length - 1"><img src="@/assets/img/add.png" /></div>
						<div @click="delRow(scope.$index, scope.row)" v-else><img src="@/assets/img/plus.png" /></div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="项目" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.time" placeholder="请选择项目"></el-input></div>
					</template>
				</el-table-column>
				<el-table-column prop="remarks" label="原因" align="center">
					<template slot-scope="scope">
						<div class="rework"><el-input v-model="scope.row.remarks" placeholder="请选择原因"></el-input></div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div style="float:right;margin-top:50px;"><el-button type="primary">确认</el-button></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			selectImg: require('@/assets/img/radio.png'),
			selectedIndex1: 1,
			selectedIndex2:1,
			selectedIndex3:2,
			selectedIndex4:1,
			form: {
				name: ''
			},
			options:[],
			classList: [
				{
					id: 1,
					url: require('@/assets/img/unradio.png'),
					name: '是'
				},
				{
					id: 2,
					url: require('@/assets/img/unradio.png'),
					name: '否'
				}
			],
			tableData: [
				{
					id: '1',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '2',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '3',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '4',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				},
				{
					id: '5',
					time: '',
					timelength: '',
					errorName: '',
					logName: '',
					remarks: ''
				}
			],
			spanArr: [],
			position: 0,
			spanArr2: [],
			position2: 0
		};
	},
	mounted() {},
	methods: {
		changeItem(id,type) {
			if(type==1){
				this.selectedIndex1 = id;
			}else if(type==2){
				this.selectedIndex2 = id;
			}else if(type==3){
				this.selectedIndex3 = id;
			}else if(type==4){
				this.selectedIndex4 = id;
			}
		},
		createRow() {
			var list = {
				id: '1',
				time: '08:32',
				timelength: '40',
				errorName: '吸收体断料',
				logName: 'Z-2中央吸收纸',
				remarks: '胶带贴复位置偏高'
			};
			this.tableData.push(list);
		},
		delRow(val, row) {
			this.tableData.splice(val, 1);
		},
		onSubmit() {
			console.log('submit!');
		}
	}
};
</script>
<style lang="scss" scoped>
.internalFault {
	.title {
		font-weight: 600;
		padding-top: 10px;
	}
}
</style>
<style scoped>
.internalFault {
	height: calc(100vh - 150px);
	overflow-y: auto;
}
.tableBox {
	border-radius: 10px;
	background: #fff;
	padding: 30px 30px;
	height: auto;
}
.internalFault >>> .el-form-item {
	border-bottom: solid 1px #eeeeee;
	padding-bottom: 5px;
}
.internalFault >>> .el-form-item__label {
	font-size: 24px;
	color: #000;
	line-height: 60px;
}
.internalFault >>> .el-form-item__content {
	font-size: 24px;
	color: #666666;
}
.internalFault >>> .el-input > input {
	background: #fff;
	font-size: 24px;
}
.internalFault >>> .el-input--large .el-input__inner {
	padding-left: 30px !important;
}
::v-deep .el-input__icon {
	display: none;
}
</style>
